<template>
  <div class="flex items-center date-split-picker">
    <i-date-picker
      v-bind="$attrs"
      v-model="startVal"
      :show-time="showTime"
      :format="$attrs.format || 'YYYY-MM-DD'"
      :value-format="$attrs.valueFormatStart || $attrs.valueFormat || 'YYYY-MM-DD'"
      :disabled-date="disabledStartDate"
      :disabled-time="disabledStartTime"
      :placeholder="startPlaceHolder"
      :popupContainer="popupContainer"
      @change="onChange"
      :trigger-props="{ updateAtScroll, scrollToClose }"
    />
    <div class="split-str">{{ splitStr }}</div>
    <i-date-picker
      v-bind="$attrs"
      v-model="endVal"
      :show-time="showTime"
      :format="$attrs.format || 'YYYY-MM-DD'"
      :value-format="$attrs.valueFormatEnd || $attrs.valueFormat || 'YYYY-MM-DD'"
      :disabled-date="disabledEndDate"
      :disabled-time="disabledEndTime"
      :placeholder="endPlaceHolder"
      :popupContainer="popupContainer"
      @change="onChange"
      :trigger-props="{ updateAtScroll, scrollToClose }"
    />
  </div>
</template>
<script>
  import dayjs from 'dayjs'
  export default {
    props: {
      /**
       * 分割符号
       */
      splitStr: {
        type: String,
        default: '至',
      },
      // 滚动容易导致下拉菜单分离
      updateAtScroll: {
        type: Boolean,
        default: () => false,
      },
      // 滚动关闭下拉菜单
      scrollToClose: {
        type: Boolean,
        default: () => false,
      },
      /**
       * 开始时间默认文本
       */
      startPlaceHolder: {
        type: String,
        default: '开始日期',
      },
      /**
       * 结束时间默认文本
       */
      endPlaceHolder: {
        type: String,
        default: '结束日期',
      },
      /**
       * 时间配置
       */
      showTime: {
        type: Boolean,
        default: false,
      },
      /**
       * v-model 绑定的值
       */
      modelValue: {
        type: Array,
      },
      popupContainer: {
        type: [String, Object],
        default: '.page-container',
      },
    },
    emits: ['update:modelValue', 'change'],
    data() {
      return {
        endOpen: false,
      }
    },
    computed: {
      startVal: {
        set(val) {
          this.$emit('update:modelValue', [val, this.endVal])
        },
        get() {
          return (this.modelValue && this.modelValue[0]) || null
        },
      },
      endVal: {
        set(val) {
          this.$emit('update:modelValue', [this.startVal, val])
        },
        get() {
          return (this.modelValue && this.modelValue[1]) || null
        },
      },
    },
    methods: {
      onChange() {
        this.$nextTick(() => {
          this.$emit('change', this.modelValue)
        })
      },
      disabledStartDate(startValue) {
        const endValue = this.endVal
        if (!startValue || !endValue) {
          return false
        }
        let showTime = this.showTime
        if (showTime) {
          // 当前时间是 00:00
          if (dayjs(endValue).hour() == 0 && dayjs(endValue).minute() == 0) {
            return dayjs(startValue).add(1, 'd').valueOf() > dayjs(endValue).endOf('day').valueOf()
          } else {
            return dayjs(startValue).valueOf() > dayjs(endValue).endOf('day').valueOf()
          }
        } else {
          return dayjs(startValue).startOf('day').valueOf() > dayjs(endValue).valueOf()
        }
      },
      disabledEndDate(endValue) {
        const startValue = this.startVal
        if (!endValue || !startValue) {
          return false
        }
        let showTime = this.showTime
        // 存在限制最大范围
        if (showTime) {
          // 当前时间是 23:50
          if (dayjs(startValue).hour() == 23 && dayjs(startValue).minute() == 59) {
            return dayjs(startValue).add(1, 'd').startOf('day').valueOf() > dayjs(endValue).valueOf()
          } else {
            return dayjs(startValue).startOf('day').valueOf() > dayjs(endValue).valueOf()
          }
        } else {
          return dayjs(startValue).valueOf() > dayjs(endValue).startOf('day').valueOf()
        }
      },
      disabledStartTime(current) {
        return this.disabledTime('start', current)
      },
      disabledEndTime(current) {
        return this.disabledTime('end', current)
      },
      disabledTime(type, current) {
        let options = {}
        let limit = null
        if (type == 'start') {
          limit = this.endVal
        } else if (type == 'end') {
          limit = this.startVal
        }
        if (limit) {
          let currentTime = current ? dayjs(current) : dayjs()
          let currentTime_year = currentTime.year()
          let currentTime_month = currentTime.month()
          let currentTime_date = currentTime.date()
          let currentTime_hour = currentTime.hour()
          let limitTime = dayjs(limit)
          let limitTime_year = limitTime.year()
          let limitTime_month = limitTime.month()
          let limitTime_date = limitTime.date()
          let limitTime_hour = limitTime.hour()
          let limitTime_minute = limitTime.minute()
          if (type == 'start') {
            if (limitTime_minute == 0) {
              options.disabledHours = () => this.range(limitTime_hour, 24)
              options.disabledMinutes = () => []
            } else {
              options.disabledHours = () => this.range(limitTime_hour + 1, 24)
              options.disabledMinutes = () => this.range(limitTime_minute, 60)
            }
            // 用户选择的是 未来 的天
            if (currentTime_year < limitTime_year || currentTime_month < limitTime_month || currentTime_date < limitTime_date) {
              options = {}
            } else {
              // 用户选择的是 未来 的小时
              if (currentTime_hour < limitTime_hour) {
                options.disabledMinutes = () => {
                  return []
                }
              }
            }
          } else {
            if (limitTime_minute == 59) {
              options.disabledHours = () => this.range(0, limitTime_hour + 1)
              options.disabledMinutes = () => []
            } else {
              options.disabledHours = () => this.range(0, limitTime_hour)
              options.disabledMinutes = () => this.range(0, limitTime_minute + 1)
            }
            // 用户选择的是 未来 的天
            if (currentTime_year > limitTime_year || currentTime_month > limitTime_month || currentTime_date > limitTime_date) {
              options = {}
            } else {
              // 用户选择的是 未来 的小时
              if (currentTime_hour > limitTime_hour) {
                options.disabledMinutes = () => {
                  return []
                }
              }
            }
          }
        }
        return options
      },
      range(start, end) {
        const result = []
        for (let i = start; i < end; i++) {
          result.push(i)
        }
        return result
      },
    },
  }
</script>
<style lang="less" scoped>
  .date-split-picker {
    width: 100%;
    position: relative;
    .split-str {
      margin: 0 6px;
    }
    :deep(.ant-calendar-picker) {
      width: calc(50% - 10px);
      min-width: unset !important;
    }
  }
</style>
